<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <link rel="stylesheet" href="./css/main.css">
    <style>
        #header_home {
            display: -webkit-box;
        }

        .flex1 {
            -webkit-box-flex: 1
        }

        .flex2 {
            -webkit-box-flex: 2
        }

        .flex3 {
            -webkit-box-flex: 3
        }

        .flex4 {
            -webkit-box-flex: 4
        }

        ul {
            width: 100%;
            list-style: none;
            display: -webkit-box;
            display: box;
        }

        .search-input {
            margin-left: 7px;
            width: 90%;
            height: 30px;
            border: 0;
            border-radius: 13px;
            background: #0070B9;
            /*去除系统默认的样式*/
            -webkit-appearance: none;
            outline: #ffffff;
        }
        .search-inputActive{
           background-color: #013B62;
        }
        .search-advertise {
            background-size: 26px;
            position: absolute;
            left: 8px;
            top: 11px;
            width: 30px;
            height: 30px;
            background-image: url("./image/btn_search_bg.png");
            background-repeat: no-repeat no-repeat;
        }

        .add-package {
            background-image: url("./image/btn_add_connection_normal.png");
            background-repeat: no-repeat no-repeat;
            background-position: center center;
        }

        .add-publish {
            background-image: url("./image/job_publish_select.png");
            background-repeat: no-repeat no-repeat;
            background-position: center center;
            -webkit-background-size: 30px;
        }

        .slider_status {
            width: 240px;
            height: 2px;
            left: 71px;
            top: 35 px;
            position: absolute;
        }

        .slider_status span {
            display: block;
            width: 73px;
            height: 100%;
            background-color: #FFFFFF;
            -webkit-transition: 300ms;
        }
    </style>
</head>
<body ontouchstart>
<div id="main">
    <!--header开始-->
    <div id="header">
        <input type="radio" name="headers" id="iheader_home" checked="true"/>

        <div id="header_home">
            <a id="back_home" tapmode="" onclick="openSearch()" class="search"></a>
            <a tapmode="" onclick="slderbar('homeGroup',0)" id="checkSt" class="flex2" style="color: #ffffff;text-align: center">
                实名动态
            </a>
            <a tapmode="" onclick="slderbar('homeGroup',1)" class="flex2" style="color: #ffffff;text-align: center">
                匿名八卦
            </a>

            <a id="load_home" class="gossip" tapmode="" onclick="openScanner()"></a>

            <div class="slider_status" id="slider_statust">
                <span id="home_bar"></span>
            </div>
        </div>
        <input type="radio" name="headers" id="iheader_jobs"/>

        <div id="header_jobs" style="-webkit-box-orient:vertical;height:75px">
            <ul class="flex1">
                <li style="-webkit-box-flex:5;" onclick="opacity(this)">
                    <input type="text" class="search-input" tapmode="search-inputActive" onclick="openSearch()"/>
                    <span class="search-advertise" id="search-advertise1"></span>
                </li>
                <li style="width: 60px" class="add-publish" tapmode="" onclick="openPicture()">

                </li>
            </ul>
            <ul style="background-color: #f0f0f0;height: 30px;line-height: 30px">
                <li tapmode="" onclick="slderbar('jobsGroup',0)" class="flex2"
                    style="color: #000;text-align: center;border-right: 1px solid #fff">
                    看职位
                </li>
                <li tapmode="" onclick="slderbar('jobsGroup',1)" class="flex2" style="color: #000;text-align: center">
                    招人才
                </li>

            </ul>

        </div>
        <input type="radio" name="headers" id="iheader_contacts"/>

        <div id="header_contacts">
            <ul>
                <li style="-webkit-box-flex:5;" onclick="opacity(this)">
                    <input type="text" class="search-input" tapmode="search-inputActive" onclick="openSearch()"/>
                    <span class="search-advertise" id="search-advertise2"></span>
                </li>
                <li style="width: 60px" class="add-package" tapmode="" onclick="openContacts()">

                </li>
            </ul>
        </div>
        <input type="radio" name="headers" id="iheader_myself"/>

        <div id="header_myself" style="text-align: center">
            <a tapmode="" onclick="slderbar('myselfGroup',0)" id="myCheckSt" class="flex2" style="color: #ffffff">
                消息中心
            </a>
            <a tapmode="" onclick="slderbar('myselfGroup',1)" class="flex2" style="color: #ffffff">
                个人设置
            </a>

            <div class="slider_status" style="left: 42px;" id="My_slider_status">
                <span id="myself"></span>
            </div>
        </div>
    </div>
    <!--header结束 -->
    <!--content开始-->
    <div id="content"></div>
    <!--content结束-->
    <!--footer开始-->
    <div id="footer">
        <form name="Menu">
            <input type="radio" name="footers" id="ifooter_home" checked="true"/>
            <a tapmode="homeActive" onclick="jumpFrame('home');">
                <p class="home"></p>
                <center>脉脉</center>
            </a>
            <input type="radio" name="footers" id="ifooter_jobs"/>
            <a tapmode="jobsActive" onclick="jumpFrame('jobs');">
                <p class="jobs"></p>
                <center>人脉招聘</center>
            </a>
            <input type="radio" name="footers" id="ifooter_contacts"/>
            <a tapmode="contactsActive" onclick="jumpFrame('contacts');">
                <p class="contacts"></p>
                <center>我的人脉</center>
            </a>
            <input type="radio" name="footers" id="ifooter_myself"/>
            <a tapmode="myselfActive" onclick="jumpFrame('myself');">
                <p class="myself"></p>
                <center>个人中心</center>
            </a>
        </form>
    </div>
    <!--footer结束 -->
</div>
</body>
<script src="./script/api.js"></script>
<script>
var curPageName; // !< 标记当前界面.

function openPicture(){
    api.getPicture({
        sourceType:	'library',
        encodingType:	'png',
        mediaValue:	'pic',
        destinationType:	'url',
        allowEdit:	true,
        quality:	50,
        targetWidth:100,
        targetHeight:100,
        saveToPhotoAlbum:	false
    },	function(ret,	err){
        if	(ret)	{
            api.alert({msg:(ret.data+'时长'+ret.duration+'s')});
        }	else{
            api.alert({msg:err.msg});
        };
    });
}


function openScanner(){
    var obj = api.require('scanner');
    obj.open(function(ret,err) {
        api.alert({
            title: '扫描结果',
            msg: ret.msg
        });
    });
}

function openContacts(){
    api.openContacts(
        function(ret,err){
            if(ret.status){
                var	msg	=	'姓名:'+ret.name+'--电话:'+ret.phone;
                api.alert({msg:msg});
            }else{
                api.alert({msg:err.msg});
            };
        }
    );
}

function openHomeFrameGroup(num) {
	if("home" === curPageName){
		return;
	}
	
	curPageName = "home";
	
		api.execScript({"frameName": "contacts", "script":"closeSelf();"});
	
    var width=parseInt(window.getComputedStyle($api.byId("checkSt"),null).width);
    $api.byId('slider_statust').style.left=50+(width*0.2)+"px";	
	$api.byId('slider_statust').style.top=($api.byId('header').offsetHeight-10)+"px";
    var s = window.getComputedStyle($api.byId('content'), null);
    var height = parseInt(s.height);
    api.setFrameGroupAttr({name: 'jobsGroup', hidden: true});
    api.setFrameGroupAttr({name: 'myselfGroup', hidden: true});
    api.setFrameAttr({name: 'contacts', hidden: true});
	
    api.openFrameGroup({
        name: 'homeGroup',
        background: '#FFF',
        rect: {x: 0, y: $api.byId('header').offsetHeight, w: s.width, h: height},
        index: num,
        frames: [
            {
                name: 'dynamic',
                url: './html/main_dynamic.html',
                bounces: true,
                opaque: true,
                bgColor: '#fff'
            },
            {
                name: 'anon',
                url: './html/main_anon.html',
                bounces: true,
                opaque: true,
                bgColor: '#FFF'
            }
        ]
    }, function (ret) {
        if (ret.index == 0) {
            api.execScript({
                name: api.winName,
                script: 'slderbarCallback("home_bar",0,"checkSt")'
            })
        } else if (ret.index == 1) {
            api.execScript({
                name: api.winName,
                script: 'slderbarCallback("home_bar",100,"checkSt")'
            })
        }
    });
    api.setFrameGroupAttr({name: 'homeGroup', hidden: false});
}

function openJobsFrameGroup(num) {
	if("jobs" === curPageName){
		return;
	}
	
	curPageName = "jobs";
	
	api.execScript({"frameName": "contacts", "script":"closeSelf();"});
	
    var s = window.getComputedStyle($api.byId('content'), null);
    var height = parseInt(s.height);
    api.setFrameGroupAttr({name: 'homeGroup', hidden: true});
    api.setFrameGroupAttr({name: 'myselfGroup', hidden: true});
    api.setFrameAttr({name: 'contacts', hidden: true});
    api.openFrameGroup({
        name: 'jobsGroup',
        background: '#FFF',
        rect: {x: 0, y: $api.byId('header').offsetHeight, w: s.width, h: height},
        index: num,
        frames: [
            {
                name: 'position',
                url: './html/jobs_position.html',
                bounces: true,
                opaque: true,
                bgColor: '#fff'
            },
            {
                name: 'talent',
                url: './html/jobs_talent.html',
                bounces: true,
                opaque: true,
                bgColor: '#FFF'
            }
        ]
    }, function (ret) {

    });
    api.setFrameGroupAttr({name: 'jobsGroup', hidden: false});
}

function openMyselfFrameGroup(num) {
	if("self" === curPageName){
		return;
	}
	
	curPageName = "self";
	
		api.execScript({"frameName": "contacts", "script":"closeSelf();"});
		
    var width=parseInt(window.getComputedStyle($api.byId("myCheckSt"),null).width);
    $api.byId('My_slider_status').style.left=(width*0.3-5)+"px";	
	$api.byId('My_slider_status').style.top=($api.byId('header').offsetHeight-10)+"px";
    var s = window.getComputedStyle($api.byId('content'), null);
    var height = parseInt(s.height);
    api.setFrameGroupAttr({name: 'homeGroup', hidden: true});
    api.setFrameGroupAttr({name: 'jobsGroup', hidden: true});
    api.setFrameAttr({name: 'contacts', hidden: true});
    api.openFrameGroup({
        name: 'myselfGroup',
        background: '#FFF',
        rect: {x: 0, y: $api.byId('header').offsetHeight, w: s.width, h: height},
        index: num,
        frames: [
            {
                name: 'message',
                url: './html/messageCenter.html',
                bounces: true,
                opaque: true,
                bgColor: '#fff'
            },
            {
                name: 'setting',
                url: './html/mySetting.html',
                bounces: true,
                opaque: true,
                bgColor: '#FFF'
            }
        ]
    }, function (ret) {
        if (ret.index == 0) {
            api.execScript({
                name: api.winName,
                script: 'slderbarCallback("myself",0,"myCheckSt")'
            })
        } else if (ret.index == 1) {
            api.execScript({
                name: api.winName,
                script: 'slderbarCallback("myself",162,"myCheckSt")'
            })
        }
    });
    api.setFrameGroupAttr({name: 'myselfGroup', hidden: false});
}

function openContactsFrame() {
	if("contact" === curPageName){
		return;
	}
	
	curPageName = "contact";
	
    var s = window.getComputedStyle($api.byId('content'), null);
    api.setFrameGroupAttr({name: 'jobsGroup', hidden: true});
    api.setFrameGroupAttr({name: 'myselfGroup', hidden: true});
    api.setFrameGroupAttr({name: 'homeGroup', hidden: true});
	api.closeFrame({"name": "contacts"});
    api.openFrame({
        name: "contacts",
        bounces: true,
        url: './html/main_contacts.html',
        bgColor: "#ffffff",
        rect: {
            x: 0,
            y: $api.byId('header').offsetHeight,
            w: parseInt(s.width),
            h: parseInt(s.height)
        }
    });
    api.setFrameAttr({name: 'contacts', hidden: false});
}

function radioSelect(id) {
    var ret = 0;
    var e = $api.byId(id);
    if (e && !e.checked) {
        e.checked = true;
        ret = 1;
    }
    return ret;
}


function jumpFrame(url) {
    try{
        radioSelect('ifooter_' + url);
        radioSelect('iheader_' + url);
        if (url == 'home') {
            openHomeFrameGroup(0);
        } else if (url == 'jobs') {
            openJobsFrameGroup(0);
        } else if (url == 'myself') {
            openMyselfFrameGroup(0);
        } else if (url == 'contacts') {
            openContactsFrame();
        }
    }catch(e){
        alert(e)
    }

}

function slderbar(groupName,index) {
    api.setFrameGroupIndex({
        name:groupName,
        index:index,
        scroll:true
    });
}

function slderbarCallback(id, num,barId) {
    var width=parseInt(window.getComputedStyle($api.byId(barId),null).width);
    if(num!=0){
        num=width;
    }
    $api.css($api.byId(id),
       "-webkit-transform:translate(" + num + "px,0)"
    );
}

function openSearch() {
    api.openWin({
        name: 'search',
        url: './html/search.html',
        bounces: false,
        opaque: false,
        animation: {
            type: "movein",
            subType: "from_bottom",
            duration: 300
        }
    });
}
apiready = function () {
    var header = $api.byId('header');
	(function(el){
	        var strDM = api.systemType;
	        if (strDM == 'ios') {
	            var strSV = api.systemVersion;
	            var numSV = parseInt(strSV,10);   
	            var fullScreen = api.fullScreen;
	            var iOS7StatusBarAppearance = api.iOS7StatusBarAppearance;
	            if (numSV >= 7 && !fullScreen && iOS7StatusBarAppearance) {
	                el.style.paddingTop = '20px';
					
					/*搜索图标单独处理.*/
					$api.byId('search-advertise1').style.top = "31px";
					$api.byId('search-advertise2').style.top = "31px";
	            }
	        }   
	    })(header);
	
    api.addEventListener({name: 'keyback'}, function(ret, err){
        api.closeWidget();
    });

    jumpFrame('home');
};

</script>
</html>